<template>
  <template v-if="field.group === 'layout'">
    <template v-if="field.type === 'grid'">
      <el-row class="custom-el-row" :gutter="field.attrs.gutter">
        <el-col v-for="(el, index) in field.attrs.cols" :span="span(index)">
          <FormItemNestedRender v-model="field.formItemList[index]" :data="data" />
        </el-col>
      </el-row>
    </template>
  </template>
  <template v-else>
    <FormItem class="custom-item" :field="field" :key="field.id" :data="data" />
  </template>
</template>

<script setup lang="ts">
import { FormGroup, gridLayout } from '@/components/DesignForm';

const field = defineModel<FormGroup>('field');

const data = defineModel<Record<string, any>>('data');

const span = (index: number) => {
  const gridLayoutConfig = gridLayout.find(x => x.cols === field.value.attrs.cols).rows.find(x => x.id === field.value.attrs.layout);
  const cols = gridLayoutConfig.values.reduce((acc, curr) => acc + curr, 0);
  return gridLayoutConfig.values[index] * 24 / cols;
}

</script>

<style lang="scss" scoped>
.custom-el-row {
  margin-bottom: 0px;
}
</style>
